<template>
  <div>
    <div id="basemap" />
    <el-button type="primary" @click="addMarkMore">添加mark</el-button>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, onUnmounted } from "vue"
  import AMapLoader from "@amap/amap-jsapi-loader"

  onMounted(() => {
    ampInit()
  })

  onUnmounted(() => {
    map?.destroy()
  })

  const key = "7865072a8152156ec1adfd52782f0e97"
  const securityJsCode = "68275d714555fa8b0a12d4f2f53cd488"
  window._AMapSecurityConfig = {
    securityJsCode: securityJsCode,
  }

  let map: any = null
  function ampInit() {
    AMapLoader.load({
      key: key, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [],
      Loca: {
        // 是否加载 Loca， 缺省不加载
        version: "2.0.0",
      },
    })
      .then((AMap) => {
        map = new AMap.Map("basemap", {
          viewMode: "3D", // 是否为3D地图模式
          zoom: 10, // 初始化地图级别
          center: [116.397428, 39.90923], // 初始化地图中心点位置
          mapStyle: "amap://styles/darkblue",
        })
        // 添加插件
        addPlugin()
        // 构造点标记
        addMark()
        // 创建 Loca 实例
        addLoca2()
        map.on("click", (e: any) => {
          // var feat = scatterLayer.queryFeature(e.pixel.toArray());
          // console.log(feat)
        })
      })
      .catch((e) => {
        console.log(e)
      })
  }

  let loca: any = null
  let scatterLayer: any = null
  function addLoca() {
    loca = new Loca.Container({
      map,
    })
    scatterLayer = new Loca.ScatterLayer({
      loca,
      zIndex: 10,
      opacity: 0.6,
      visible: true,
      zooms: [2, 22],
    })

    let pointGeo = new Loca.GeoJSONSource({
      url: "https://a.amap.com/Loca/static/loca-v2/demos/mock_data/pulselink-china-city-point.json",
    })
    scatterLayer.setSource(pointGeo)
    scatterLayer.setStyle({
      unit: "meter",
      size: [100000, 100000],
      borderWidth: 0,
      texture: "https://a.amap.com/Loca/static/loca-v2/demos/images/breath_red.png",
      duration: 2000,
      animate: true,
      extData: (index, feat) => {
        return feat.properties
      },
    })
    loca.add(scatterLayer)
    loca.animate.start()
    scatterLayer.on("click", () => {
      console.log(1)
    })
  }

  function addLoca2() {
    loca = new Loca.Container({
      map,
    })
    let labelsLayer = new Loca.LabelsLayer({
      zooms: [10, 20],
    })
    let geo = new Loca.GeoJSONSource({
      url: "https://a.amap.com/Loca/static/loca-v2/demos/mock_data/charging_pile.json",
    })
    labelsLayer.setSource(geo)
    labelsLayer.setStyle({
      icon: {
        type: "image",
        image: "https://a.amap.com/Loca/static/loca-v2/demos/mock_data/charging_pile.png",
        size: [48, 75],
        anchor: "center",
      },
      text: {
        // 每项配置都可使用回调函数来动态配置
        content: (index, feat) => {
          return feat.properties.name
        },
        style: {
          fontSize: 12,
          fontWeight: "normal",
          fillColor: "#5CDE8E",
          strokeColor: "#000",
          strokeWidth: 2,
        },
        direction: "bottom",
      },
      extData: (index, feat) => {
        return feat.properties
      },
    })
    loca.add(labelsLayer)
    labelsLayer.on("complete", () => {
      let normalMarker = new AMap.Marker({
        offset: [70, -15],
      })
      let labelMarkers = labelsLayer.getLabelsLayer().getAllOverlays()
      console.log(labelsLayer)
      for (let marker of labelMarkers) {
        marker.on("mouseover", (e) => {
          console.log(e)
          let position = e.data.data && e.data.data.position
          if (position) {
            normalMarker.setContent(
              '<div style="background-color: #fff;width: 300px;padding: 10px">地址：' +
                marker.getExtData().address +
                "</div>"
            )
            normalMarker.setPosition(position)
            map.add(normalMarker)
          }
        })
        marker.on("mouseout", () => {
          map.remove(normalMarker)
        })
      }
    })
  }

  function addMark() {
    const markers = [
      {
        title: "1111",
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png",
        position: [116.205467, 39.907761],
      },
      {
        title: "222",
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png",
        position: [116.368904, 39.913423],
      },
      {
        title: "33",
        icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png",
        position: [116.305467, 39.807761],
      },
    ]
    markers.forEach((i) => {
      const marker = new AMap.Marker({
        map,
        icon: i.icon,
        position: [i.position[0], i.position[1]],
        title: i.title,
        anchor: "bottom-center",
        offset: new AMap.Pixel(0, 0),
      })
      let infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        autoMove: true,
        content: createInfoWindow(i),
      })
      marker.on("click", () => {
        infoWindow.open(map, marker.getPosition())
      })
    })

    // svg
    const markerContent1 = `
      <svg width="100" height="100">
        <circle cx="50" cy="50" r="50" style="fill:#ff6600">
          <animate attributeName="r" attributeType="XML" from="50" by="80"
              begin="0s" dur="2s" fill="freeze"
              repeatCount="indefinite"
              values="25; 40; 25"
          />
          <animate attributeName="fill-opacity" attributeType="css" 
              begin="0s" dur="2s" fill="freeze"
              repeatCount="indefinite"
              values="1; 0.6; 1"
          />
       </circle>
      </svg>
    `
    let marker1 = new AMap.Marker({
      map,
      position: [116.019467, 39.909761], //右边红点
      content: markerContent1,
      offset: new AMap.Pixel(-70, -70),
    })
    map.add(marker1)

    // gif
    const icon = new AMap.Icon({
      size: new AMap.Size(50, 50),
      image: "/src/assets/img/58V888piCFWP.gif",
      imageSize: new AMap.Size(50, 50),
    })
    let marker2 = new AMap.Marker({
      map,
      position: [116.259467, 39.969761], //右边红点
      icon: icon,
      anchor: "bottom-center",
      title: "1231231233",
      // offset: new AMap.Pixel(-25, -50)
    })
    map.add(marker2)
  }

  function addMarkMore() {
    const marker = new AMap.Marker({
      title: "33333",
      icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
      position: [116.457428, 39.90923],
      anchor: "bottom-center",
    })
    map.add(marker)
    let infoWindow = new AMap.InfoWindow({
      isCustom: true, //使用自定义窗体
      autoMove: true,
      offset: new AMap.Pixel(16, -45),
    })
    marker.on("click", () => {
      infoWindow.open(map, marker.getPosition())
      infoWindow.setContent(createInfoWindow({ title: "sdasdasd" }))
    })
    marker.on("mouseover", (e: any) => {
      console.log(e)
      toolTip(e)
    })
    marker.on("mouseout", (e: any) => {
      console.log(e)
      clickInfo.hide()
    })
  }

  window.amp_close = function (item: any) {
    let data = JSON.parse(decodeURIComponent(item))
    console.log("amp_close", data)
  }

  function createInfoWindow(item: any) {
    let infoString = encodeURIComponent(JSON.stringify(item))
    return `
        <div style="background-color: #fff;padding: 10px">
          <div>mkiggggg${item.title}</div>
          <button onClick="amp_close('${infoString}')">可点击</button>  
        </div>
      `
  }

  function createInfoWindow2(item: any) {
    let infoString = encodeURIComponent(JSON.stringify(item))
    return `
        <div style="background-color: #fff;padding: 10px">
          <div>mkiggggg${item.title}</div>
        </div>
      `
  }

  let clickInfo: any = null
  function toolTip(e: any) {
    clickInfo = new AMap.Text({
      offset: [30, -30],
      position: [116.396923, 39.918203, 0],
    })
    clickInfo.setMap(map)
    clickInfo.hide()
    if (e) {
      clickInfo.show()
      let title = e.target._opts.title
      clickInfo.setText(title)
      clickInfo.setPosition(e.target._opts.position)
    }
  }

  function addPlugin() {
    AMap.plugin(["AMap.HawkEye", "AMap.Scale", "AMap.ControlBar"], function () {
      const hawkEye = new AMap.HawkEye()
      map.addControl(hawkEye)
      const scale = new AMap.Scale()
      map.addControl(scale)
      const controlBar = new AMap.ControlBar()
      map.addControl(controlBar)
    })
  }
</script>

<style scoped lang="scss">
  #basemap {
    width: 100%;
    height: 500px;
    border: 1px solid violet;
  }
</style>
